<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的入门用法</title>
    <script src="../plugins/vue/vue.min.js"></script>

</head>
<body>

    <div id="app">

        <input  v-model="message">  {{message}}  <br/>
        <input  v-model="message">   {{message}}<br/>
        <input  v-model="message">   {{message}}<br/>
        <input  v-model="message">   {{message}}<br/>
        <input  v-model="message">   {{message}}<br/>
        <input  v-model="message">   {{message}}<br/>
        <input  v-model="message">   {{message}}<br/>
        <input  v-model="message">   {{message}}<br/>
        <input  v-model="message">   {{message}}<br/>
        <input  v-model="message">   {{message}}<br/>
        <input  v-model="message">   {{message}}<br/>
        <input  v-model="message">   {{message}}<br/>

        <button @click="alert(222)">我是一个按钮</button>
        <button @click="clickMe">我是一个高级按钮</button><br/>
        当前系统时间是： {{getNowTime()}}

    </div>

</body>

<script>
    new Vue({
        el:"#app",//xxx与第3步中定义的id的值保持一致
        data:{//用来定义变量的
            message :"我是vue的一个变量"
        },
        methods:{//用来定义自定义界面事件的
            clickMe(){
                alert("你好，你终于想起来，我还能这么用了，哈哈")
            },
            getNowTime(){
                return new Date().toLocaleString();
            }

        }

    })

</script>
</html>